<template>
  <van-nav-bar
      :title="$t('msg.orderDetailTitle')"
      :border=false
      class="title-text"
  >
    <template #left>
      <van-icon :name="require('../../assets/ic_back.png')" size="18" @click="onBack"/>
    </template>
  </van-nav-bar>
  <div class="image-v">
    <item-view :item-data="detailData"/>
  </div>

  <div class="qr-v">
    <span class="text-d">{{$t('msg.orderStr1')}}</span>
    <span class="span1">{{ $t('msg.orderStr2') }}</span>
    <qrcode-vue :value="detailData._id" size:230/>
  </div>
</template>

<script>
import {getAppointmentDetail} from "@/http/api";
import ItemView from "@/components/ItemView.vue";
import QrcodeVue from "qrcode.vue";

export default {
  name: 'AppointmentDetail',
  components: {ItemView, QrcodeVue},
  setup() {
    const onBack = () => history.back();
    return {
      onBack,
    }
  },
  data() {
    return {
      detailData: {}
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      try {
        let data = await getAppointmentDetail(this.$route.params.id)
        this.detailData = data
      } catch (e) {

      }
    }
  }
}
</script>

<style scoped>
.image-v {
  padding: 16px;
  background-color: white;
}

.qr-v {
  margin-top: 10px;
  background-color: white;
  height: 100%;
  padding: 20px 16px 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.text-d {
  font-size: 17px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 22px;
  align-self: flex-start;
}

.span1 {
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 18px;
  margin-top: 36px;
  margin-bottom: 20px;
  text-align: center;
}
</style>
